
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/> 	
	<meta name="viewport" content="width=310,height=632,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="./css/gmu.css"/>
	<link rel="stylesheet" type="text/css" href="./css/group.css"/>
	<title>HTC 模板</title>
	<style type="text/css">
		#slider{height:185px;padding-top:10px;}

		/*	序列点（号）
			======================*/
		.ui-slider-dots{
			padding:0;
			-webkit-box-sizing:border-box;
			text-align:center;
			position: relative;
			bottom: 35px;
		}
		.ui-slider-dots b{
			display:inline-block;
			height:6px;
			width:20px;
			border-radius:0;
			background-color:#bfc1c5;
		}
		.ui-slider-dots b.ui-slider-dot-select{	
			background-color:#63ac0e;
		
		}
		.ui-slider-item ul{width:100%;padding:10px 50px; -webkit-box-sizing:border-box;} 
		.ui-slider-item li{
			width:50%;
			float:left;
			text-align:center;
			padding:5px;
			-webkit-box-sizing:border-box;
		}
		.ui-slider-item li img{
			-webkit-box-shadow:0px 2px 5px #999;
		}


		.ui-slider-pre,.ui-slider-next{
			border-radius:0;
			background:url('./img/htcSlider.png') no-repeat 0 50%;
			width:30px;
			background-size:286px 39px;
		}
		.ui-slider-pre{left:10px;}
		.ui-slider-next{
			right:10px;
			background-position:100% 50%;
		}	</style>


</head>

<body>

	<section class='htc' >

		<section id="slider" style=''>
			<div>
				<ul>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
				</ul>
			</div>
			<div>
				<ul>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
				</ul>
			</div>
			<div>
				<ul>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
				</ul>
			</div>
			<div>
				<ul>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
					<li><img src="./img/htcSlider01.png"/></li>
				</ul>
			</div>

		</section>
		<section class='videoList'><img src='./img/htcBig.png'/></section>	

	</section>	
	<script type="text/javascript" src='js/zepto.min.js'></script>
	<script type="text/javascript" src="js/gmu.js"></script>
<script type="text/javascript">

		//创建slider组件
	   $('#slider').slider();
	</script>

</body>
</html>

